<script setup lang="ts">
import { computed } from 'vue';

defineOptions({ name: 'FileItem' });

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

// 判断是否为图片类型
const isImage = computed(
  () => ['IMAGE'].includes(props.data.category) && props.data.url,
);

// 文件类型与图标 ID 的映射
const iconMapping = {
  AUDIO: 'icon-AUDIO',
  VIDEO: 'icon-VIDEO',
  IMAGE: 'icon-IMAGE',
  DOCUMENT: 'icon-DOCUMENT',
  OTHER: 'icon-OTHER',
};

// 获取对应的图标名称
const getIconName = computed(() => {
  const category = props.data.category;
  return iconMapping[category] || 'icon-default'; // 默认图标
});
</script>

<template>
  <div class="file-preview">
    <!-- 如果是图片，则显示图片 -->
    <a-image
      v-if="isImage"
      :src="props.data.url"
      alt="alt"
      class="file-image"
    />
    <!-- 如果不是图片，则显示对应的图标 -->
    <svg v-else aria-hidden="true" class="file-icon">
      <use :href="`#${getIconName}`" />
    </svg>

    <!-- 内联 SVG 符号定义 -->
    <svg
      class="icon"
      height="50"
      viewBox="0 0 1024 1024"
      width="50"
      xmlns="http://www.w3.org/2000/svg"
    >
      >
      <symbol id="icon-default" viewBox="0 0 1024 1024">
        <path
          d="M300.05592 0h423.88816c200.041092 0 300.05592 100.014829 300.05592 300.05592v423.88816c0 200.041092-100.014829 300.05592-300.05592 300.05592H300.05592C100.014829 1024 0 923.973737 0 723.94408V300.05592C0 100.014829 100.014829 0 300.05592 0z"
          fill="#6C6CEA"
          opacity=".15"
        />
        <path
          d="M231.359328 227.425968m35.594623 0l178.281834 0q35.594622 0 35.594623 35.594622l0 178.281835q0 35.594622-35.594623 35.594623l-178.281834 0q-35.594622 0-35.594623-35.594623l0-178.281835q0-35.594622 35.594623-35.594622Z"
          fill="#6C6CEA"
        />
        <path
          d="M543.62696 227.425968m35.594622 0l178.281835 0q35.594622 0 35.594622 35.594622l0 178.281835q0 35.594622-35.594622 35.594623l-178.281835 0q-35.594622 0-35.594622-35.594623l0-178.281835q0-35.594622 35.594622-35.594622Z"
          fill="#6C6CEA"
        />
        <path
          d="M231.359328 536.091831m35.594623 0l178.281834 0q35.594622 0 35.594623 35.594622l0 178.281835q0 35.594622-35.594623 35.594622l-178.281834 0q-35.594622 0-35.594623-35.594622l0-178.281835q0-35.594622 35.594623-35.594622Z"
          fill="#6C6CEA"
        />
        <path
          d="M543.62696 536.091831m35.594622 0l178.281835 0q35.594622 0 35.594622 35.594622l0 178.281835q0 35.594622-35.594622 35.594622l-178.281835 0q-35.594622 0-35.594622-35.594622l0-178.281835q0-35.594622 35.594622-35.594622Z"
          fill="#6C6CEA"
        />
        <path
          d="M720.342311 765.427308c-1.212024 0-2.229666-0.034303-2.984323-0.068605h-59.583545c-11.365581 0-20.581536-9.215954-20.581536-20.581536s9.215954-20.581536 20.581536-20.581535h61.138595l0.468801 0.045737c4.482201 0.205815 9.879137-1.086248 11.25124-2.286838 0.057171-0.194381 0.160079-0.686051 0.160078-1.589352v-56.244763c0-11.365581 9.215954-20.581536 20.581536-20.581535s20.581536 9.215954 20.581536 20.581535v56.244763c0 12.669079-4.56224 23.611595-13.195052 31.649828-12.771986 11.891554-30.231989 13.435169-38.418866 13.435169z"
          fill="#FFFFFF"
        />
      </symbol>
      <symbol id="icon-AUDIO" viewBox="0 0 1024 1024">
        <path
          d="M814.933333 914.666667H214.4c-54.933333 0-99.733333-44.8-99.733333-99.733334V214.4c0-54.933333 44.8-99.733333 99.733333-99.733333h600.533333c54.933333 0 99.733333 44.8 99.733334 99.733333v600.533333c0 54.933333-44.8 99.733333-99.733334 99.733334z"
          fill="#FF4C5E"
        />
        <path
          d="M349.866667 741.333333h-0.533334c-33.6 0-60.8-27.2-60.8-60.8v-80.533333c0-33.6 27.2-60.8 60.8-60.8h0.533334c33.6 0 60.8 27.2 60.8 60.8v80.533333c0 33.6-27.2 60.8-60.8 60.8zM685.866667 736h-0.533334c-33.6 0-60.8-27.2-60.8-60.8v-80.533333c0-33.6 27.2-60.8 60.8-60.8h0.533334c33.6 0 60.8 27.2 60.8 60.8v80.533333c0 33.6-27.2 60.8-60.8 60.8z"
          fill="#FDFDFD"
        />
        <path
          d="M347.2 538.666667C355.733333 451.733333 428.266667 384 517.333333 384s161.6 67.733333 170.133334 154.666667h58.666666c-8-118.933333-107.2-213.333333-228.8-213.333334s-220.266667 94.4-228.8 213.333334h58.666667zM704 538.666667h42.666667v96h-42.666667zM288 538.666667h53.333333v96H288z"
          fill="#FDFDFD"
        />
      </symbol>

      <symbol id="icon-AUDIO" viewBox="0 0 1024 1024">
        <path
          d="M814.933333 914.666667H214.4c-54.933333 0-99.733333-44.8-99.733333-99.733334V214.4c0-54.933333 44.8-99.733333 99.733333-99.733333h600.533333c54.933333 0 99.733333 44.8 99.733334 99.733333v600.533333c0 54.933333-44.8 99.733333-99.733334 99.733334z"
          fill="#FF4C5E"
        />
        <path
          d="M349.866667 741.333333h-0.533334c-33.6 0-60.8-27.2-60.8-60.8v-80.533333c0-33.6 27.2-60.8 60.8-60.8h0.533334c33.6 0 60.8 27.2 60.8 60.8v80.533333c0 33.6-27.2 60.8-60.8 60.8zM685.866667 736h-0.533334c-33.6 0-60.8-27.2-60.8-60.8v-80.533333c0-33.6 27.2-60.8 60.8-60.8h0.533334c33.6 0 60.8 27.2 60.8 60.8v80.533333c0 33.6-27.2 60.8-60.8 60.8z"
          fill="#FDFDFD"
        />
        <path
          d="M347.2 538.666667C355.733333 451.733333 428.266667 384 517.333333 384s161.6 67.733333 170.133334 154.666667h58.666666c-8-118.933333-107.2-213.333333-228.8-213.333334s-220.266667 94.4-228.8 213.333334h58.666667zM704 538.666667h42.666667v96h-42.666667zM288 538.666667h53.333333v96H288z"
          fill="#FDFDFD"
        />
      </symbol>

      <symbol id="icon-VIDEO" viewBox="0 0 1024 1024">
        <path
          d="M1017.090227 295.25786c-10.599114-5.396878-22.038724-5.197812-29.678402 0.663551-33.686248 25.807691-69.433926 53.084041-106.530823 81.395529a2075.873545 2075.873545 0 0 0-17.982219-167.705756c-2.393206-15.836739-16.743591-29.722639-31.792917-30.877218C599.093217 161.229504 367.076144 166.161896 135.063495 193.526719c-15.044902 1.809281-30.483511 15.593437-34.079954 30.656034-45.227603 191.87669-45.227603 383.75338 0 575.63007 3.596444 15.062597 19.035052 28.851176 34.079954 30.660458 232.012649 27.369247 464.029722 32.297215 696.042371 14.797176 15.044902-1.159002 29.399711-15.040478 31.792917-30.877217a2075.869122 2075.869122 0 0 0 17.982219-167.696909c37.096897 28.307065 72.844575 55.583415 106.530823 81.386682 7.644102 5.861363 19.074865 6.069275 29.678402 0.667974 10.59469-5.405725 18.482094-15.407643 20.114428-25.82981 19.902092-127.277836 19.902092-254.560095 0-381.837931-1.632334-10.417743-9.524162-20.419661-20.114428-25.825386z"
          fill="#9094D1"
        />
        <path
          d="M359.210859 364.912969c1.344796-28.72289 21.530002-40.193466 44.891404-25.117598 72.349124 46.545857 148.153135 95.303548 224.054466 143.71177 24.639842 15.708452 24.639842 41.272842 0 56.976871-75.905755 48.417069-151.709766 97.179185-224.054466 143.729465-23.365825 15.071444-43.546608 3.600867-44.891404-25.117599a3412.281974 3412.281974 0 0 1 0-294.182909z"
          fill="#D3D4ED"
        />
      </symbol>

      <symbol id="icon-DOCUMENT" viewBox="0 0 1024 1024">
        <path
          d="M654.826667 117.333333l209.173333 209.173334V928h-704v-810.666667h494.826667zM586.666667 181.312h-362.666667V864h576v-469.333333h-213.333333V181.333333zM704 672v64H320v-64h384z m0-170.666667v64H320v-64h384z m-203.264-170.666666v64H320v-64h180.736z m276.928 0L650.666667 203.669333V330.666667h126.997333z"
          fill="#1677FF"
        />
      </symbol>
      <symbol id="icon-IMAGE" viewBox="0 0 1024 1024">
        <path
          d="M906.666667 160v704h-768v-704h768z m-167.061334 366.4l-216.405333 180.096-140.565333-110.890667L202.666667 741.141333V800h640v-188.117333l-103.061334-85.482667zM842.666667 224h-640v434.837333l179.477333-145.130666 139.968 110.421333 217.450667-180.906667 103.104 85.504V224z m-437.333334 42.666667a96 96 0 1 1 0 192 96 96 0 0 1 0-192z m0 64a32 32 0 1 0 0 64 32 32 0 0 0 0-64z"
          fill="#1677FF"
        />
      </symbol>
      <symbol id="icon-OTHER" viewBox="0 0 1024 1024">
        <path
          d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
          fill="#D5E1FF"
        />
        <path
          d="M320 448a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m192 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m192 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128z"
          fill="#2C68FF"
        />
      </symbol>
    </svg>
  </div>
</template>

<style scoped>
.file-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 0;
}

.file-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
}
</style>
